<template>
    <div class="login_box">
        <div class="login_info">
            <div class="titles">{{siteTitle}}</div>
            <div class="titles_tips">{{activeIndex==4?'密码修改成功':'找回密码'}}</div>
            <div class="steps_box" v-if="activeIndex!=4">
                <div class="tops">
                    <span class="info_box" :class="{'active':activeIndex==1 || activeIndex==2 || activeIndex==3 || activeIndex==4}"></span>
                    <span class="lines"></span>
                    <span class="info_box" :class="{'active':activeIndex==2 || activeIndex==3 || activeIndex==4}"></span>
                    <span class="lines"></span>
                    <span class="info_box" :class="{'active':activeIndex==3 || activeIndex==4}"></span>
                    <span class="lines"></span>
                    <span class="info_box" :class="{'active':activeIndex==4}"></span>
                </div>
                <div class="bottoms">
                    <span :class="{'active':activeIndex==1 || activeIndex==2 || activeIndex==3 || activeIndex==4}">填写账号名</span>
                    <span :class="{'active':activeIndex==2 || activeIndex==3 || activeIndex==4}">身份验证</span>
                    <span :class="{'active':activeIndex==3 || activeIndex==4}">设置新密码</span>
                    <span :class="{'active':activeIndex==4}">完成</span>
                </div>
            </div>
            <template v-if="activeIndex==1">
                <div class="input_box"><input v-model="phone" placeholder="请输入需找回的账号"/></div>
                <div class="btn_box" @click="oneStep">下一步</div>
                <div class="tips_login" @click="goLogin">
                    <span>记起密码？<label>登录</label> </span>
                </div>
            </template>
            <template v-if="activeIndex==2">
                <div class="phone_txt">{{ phone }}</div>
                <div class="sms_box">
                    <input v-model="code" placeholder="输入验证码"/>
                    <div @click="GetVerificationCode" class="sms_btn">{{ sendTime }}</div>
                </div>
                <div class="btn_box" @click="twoStep">下一步</div>
                <div class="tips_login" @click="goLogin">
                    <span>记起密码？<label>登录</label> </span>
                </div>
            </template>
            <template v-if="activeIndex==3">
                <div class="input_box"><input type="password" v-model="password" placeholder="输入新密码"/></div>
                <div class="input_box"><input type="password" v-model="again_password" placeholder="再次输入新密码"/></div>
                <div class="btn_box" @click="threeStep">下一步</div>
                <div class="tips_login" @click="goLogin">
                    <span>记起密码？<label>登录</label> </span>
                </div>
            </template>
            <template v-if="activeIndex==4">
                <div class="img_box">
                    <img src="../../assets/registered-successfully-red.png">
                </div>
                <div class="btn_box" @click="goLogin">去登录</div>
            </template>
        </div>
    </div>
</template>

<script>
    import {forgetOne, forgetThree, forgetTwo, getSendCode} from "@/api/apis";

    export default {
        name: "RetrievePassword",
        data() {
            return {
                sendTime: '获取验证码',
                snsMsgWait: 60,
                phone: '',
                code: '',
                token: '',
                password: '',
                again_password: '',
                activeIndex: 1
            }
        },
        computed: {
            siteTitle() {
                return this.$store.state.siteTitle;
            }
        },
        methods: {
            goLogin() {
                this.$router.push({name: 'login'})
            },
            //用户手机验证码
            GetVerificationCode() {
                var phoneReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
                if (!this.phone) {
                    this.$message.warning('请输入手机号');
                } else if (!phoneReg.test(this.phone)) {
                    this.$message.warning('请输入正确的手机号');
                } else {
                    if (this.snsMsgWait >= 60) {
                        let data = {phone: this.phone}
                        getSendCode(data).then(res => {
                            this.$message.success('验证码已发送')
                            this.inter = setInterval(function () {
                                this.sendTime = this.snsMsgWait + 'S'
                                this.snsMsgWait = this.snsMsgWait - 1
                                if (this.snsMsgWait < 0) {
                                    clearInterval(this.inter)
                                    this.sendTime = '重新发送'
                                    this.snsMsgWait = 60
                                }
                            }.bind(this), 1000);
                        })
                    }
                }
            },
            //第一步验证
            oneStep() {
                let data = {phone: this.phone}
                forgetOne(data).then(res => {
                    this.activeIndex = 2
                })
            },
            //第二步验证
            twoStep() {
                let data = {phone: this.phone, code: this.code}
                forgetTwo(data).then(res => {
                    this.token = res.data.token
                    this.activeIndex = 3
                })
            },
            //第三步验证
            threeStep() {
                let data = {token: this.token, password: this.password, again_password: this.again_password}
                forgetThree(data).then(res => {
                    this.activeIndex = 4
                })
            },
        }

    }
</script>

<style scoped lang="less">
    .login_box {
        min-height: 100vh;
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .login_info {
            width: 480px;
            padding: 63px 0 59px;
            background: #FFFFFF;
            border: 1px solid #9D9D9D;
            margin: 0 auto;
            
            .titles {
                text-align: center;
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #000000;
                margin-bottom: 29px;
            }
            
            .titles_tips {
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                text-align: center;
                margin-bottom: 28px;
                
            }
            
            .steps_box {
                width: 343px;
                margin: 0 auto 37px;
                
                .tops {
                    width: 306px;
                    margin: 0 0 10px 29px;
                    display: flex;
                    align-items: center;
                    
                    .info_box {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        background: #FFFFFF;
                        border: 4px solid #C7C7C7;
                        border-radius: 50%;
                        box-sizing: border-box;
                    }
                    
                    .active {
                        border-color: #B11E24;
                    }
                    
                    .lines {
                        display: inline-block;
                        width: 86px;
                        height: 2px;
                        background: #C7C7C7;
                        box-sizing: border-box;
                    }
                }
                
                .bottoms {
                    span {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #9D9D9D;
                        margin-right: 35px;
                    }
                    
                    .active {
                        color: #B11E24;
                    }
                    
                    span:nth-child(3) {
                        margin-right: 49px;
                    }
                    
                    span:nth-child(4) {
                        margin-right: 0;
                    }
                }
            }
            
            .input_box {
                text-align: center;
                
                input {
                    background: #FFFFFF;
                    border: 1px solid #C7C7C7;
                    height: 42px;
                    padding: 0 20px;
                    width: 300px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 19px;
                    color: #9D9D9D;
                    opacity: 1;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                }
            }
            
            .phone_txt {
                width: 300px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #B11E24;
                margin: 0 auto 20px;
            }
            
            .sms_box {
                display: flex;
                align-items: center;
                width: 300px;
                justify-content: space-between;
                margin: 0 auto 40px;
                
                input {
                    padding: 0 20px;
                    width: 168px;
                    height: 42px;
                    background: #FFFFFF;
                    border: 1px solid #C7C7C7;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #9D9D9D;
                    box-sizing: border-box;
                }
                
                .sms_btn {
                    width: 112px;
                    height: 42px;
                    background: #B11E24;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 42px;
                    color: #FFFFFF;
                    text-align: center;
                }
            }
            
            .btn_box {
                width: 300px;
                height: 42px;
                background: #B11E24;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 42px;
                color: #FFFFFF;
                text-align: center;
                margin: 0 auto 20px;
            }
            
            .tips_login {
                width: 300px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                
                span {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    
                    label {
                        color: #B11E24;
                    }
                }
            }
            
            .img_box {
                width: 300px;
                text-align: center;
                margin: 0 auto 40px;
                
                img {
                    width: 68px;
                    height: 68px;
                }
            }
        }
    }
</style>
